<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  }
})
</script>

<template>
  <div style="width: 100%; height: 100%">
    <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
      <div class="dom-box">
        <!-- <div class="dom-title">销售数量/金额</div> -->
        <div class="dom-content">
          <div class="chart-content">
            <div class="machine-list">
              <div class="machine-list-item" v-for="machine in props.data" :key="machine.MachineId">
                <div class="machine-list-item-image">
                  <img src="http://bg.chidg.com:806/public/1721283041566.jpg" alt="" />
                </div>

                <div class="machine-list-item-content">
                  <div>
                    <span>设备名称：</span>
                    <span>{{ machine.MachineName }}</span>
                  </div>
                  <div>
                    <span>设备编号：</span>
                    <span>{{ machine.MachineId }}</span>
                  </div>
                </div>
                <div style="flex: 1">
                  <ps-chart2 :option="machine.options" />
                </div>
              </div>
              <div class="machine-list-item" v-for="machine in props.data" :key="machine.MachineId">
                <div class="machine-list-item-image">
                  <img src="http://bg.chidg.com:806/public/1721283041566.jpg" alt="" />
                </div>

                <div class="machine-list-item-content">
                  <div>
                    <span>设备名称：</span>
                    <span>{{ machine.MachineName }}</span>
                  </div>
                  <div>
                    <span>设备编号：</span>
                    <span>{{ machine.MachineId }}</span>
                  </div>
                </div>
                <div style="flex: 1">
                  <ps-chart2 :option="machine.options" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box7>
  </div>
</template>

<style scoped lang="scss">
@font-face {
  font-family: 'UnidreamLED';
  src: url(../../../assets/font/DS-Digital/DS-DIGI-1.ttf); /***兼容ie9***/
}

.machine-list {
  width: 100%;
  height: 80%;
  padding: 20px;
  overflow: hidden;
  animation: moveY 20s linear infinite;
  margin-bottom: 20px;
  animation-play-state: running;

  &:hover {
    animation-play-state: paused; // 鼠标悬停时暂停动画
  }
  &-item {
    height: 160px;
    display: flex;
    padding: 10px 20px;
    border: 1px solid #3a4662;
    margin-bottom: 10px;
    color: #fff;
    font-size: 14px;

    &-image {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-content {
      margin-left: 15px;
      gap: 10px;
      width: 140px;
      display: flex;

      flex-direction: column;
      justify-content: space-around;
    }
  }
}

@keyframes moveY {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}
</style>
